<template>
  <div class="normal-que-header">
    <div class="normal-header">
      <div class="normal-header__logo">
        <div class="normal-header__logo--icon"></div>
        <div class="normal-header__logo--line"></div>
        <a href="javascript;" title="剑雅15-Test 2" class="normal-header__logo--name txt-el">剑雅15-Test 2</a>
      </div>
      <div class="normal-header__middle listen">
        <div id="clock-info" class="normal-header__clock-info" @mouseenter="enter" @mouseleave="leave">
          <i class="normal-header__clock-info--icon icon"></i>
          <div class="normal-header__clock-info--cont" v-show="!seen">
            <span>{{minutes}}</span>
            <span style="margin: 5px;">minutes</span>
            <span style="margin: 5px;">left</span>
          </div>
          <div class="normal-header__clock-info--cont" v-show="seen">
            <span style="display: none;">0</span>
            <span style="margin: 5px; display: none;">:</span>
            <span>{{minutes}}</span>
            <span style="margin: 5px;">:</span>
            <span>{{seconds}}</span>
            <span style="margin: 5px;">left</span>
          </div>
        </div>
      </div>
      <div class="normal-header__btns">
        <div class="controll-box normal-header__btns-volume">
          <div class="volume-controll">
            <i class="volume-controll-icon"></i>
            <div class="volume-controll-wrap">
              <el-slider v-model="slider" :min="0" :show-tooltip="false" @change="changeSlider"></el-slider>
            </div>
          </div>
        </div>
        <!---->
        <div class="normal-header__btns-item middle blue" @click="pause">Pause</div>
        <div class="normal-header__btns-item blue" @click="submit">Section Submit</div>
        <div class="normal-header__btns-item small" @click="helpModal = true">Help</div>
        <div class="normal-header__btns-item small disable" @click="hideModal = true">Hide</div>
      </div>
    </div>

    <modal v-show="suspend" @start="start"></modal>
    <custom v-show="sectionSubmit" @hideSubmitModal="hideSubmitModal"></custom>
    <help v-show="helpModal" @hideHelpModal="hideHelpModal"></help>
    <hide-modal v-show="hideModal" @hideModalClick="hideModalClick"></hide-modal>
  </div>
</template>

<script>
  let timer;
  import modal from './modal.vue'
  import custom from './custom.vue'
  import hideModal from './hideModal.vue'
  import help from './help.vue'
  export default {
    name: 'nav2',
    data() {
      return {
        slider: 30,
        minutes: 33, //分
        seconds: 0, //秒
        seen: false,
        suspend: false,
        hideModal: false,
        helpModal: false,
        sectionSubmit: false
      }
    },
    components: {
      modal,
      custom,
      help,
      hideModal
    },
    computed: {
      second: function () {
        return this.num(this.seconds);
      },
      minute: function () {
        return this.num(this.minutes);
      }
    },
    watch: {
      second: {
        handler(newVal) {
          this.num(newVal);
        }
      },
      minute: {
        handler(newVal) {
          this.num(newVal);
        }
      }
    },
    methods: {
      num: function (n) {
        return n < 10 ? "0" + n : "" + n;
      },
      outTime: function (t) {
        var _this = this;
        if (t) {
          timer = window.setInterval(function () {
            if (_this.minutes <= 0 && _this.seconds <= 0) {
              clearInterval(timer);
              app.mask = 1, app.popupTime = 1;
            }
            if (_this.seconds === 0 && _this.minutes !== 0) {
              _this.seconds = 59;
              _this.minutes -= 1;
            } else if (_this.minutes === 0 && _this.seconds === 0) {
              _this.seconds = 0;
              window.clearInterval(timer);
            } else {
              _this.seconds -= 1;
            }
          }, 1000);

        } else {
          clearInterval(timer);
        }

      },
      submit() {
        this.sectionSubmit = true;
        localStorage.isPage = '/readDetail';
      },
      hideSubmitModal() {
        this.sectionSubmit = false;
      },
      hideModalClick() {
        this.hideModal = false;
      },
      hideHelpModal() {
        this.helpModal = false;
      },
      pause() {
        this.suspend = true;
        this.outTime(false);
      },
      start() {
        this.suspend = false;
        this.outTime(true);
      },
      enter(index) {
        this.seen = true;
      },
      leave() {
        this.seen = false;
      },
      changeSlider(e) {
        this.audio.volume = e / 100;
      },
      playAudio() {
        this.audio.play();
      },
      pauseAudio() {
        this.audio.pause();
      },
    },
    mounted() {
      // this.outTime(true)
      this.audio = new Audio();
      this.audio.src = 'https://cdn.tiku.xdf.cn/1004/1591499845656367.mp3';
    }
  }

</script>

<style lang="less">
  .normal-que-header {
    width: 100%;
    height: 3.33333rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #152531;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#152531), color-stop(#434c51), to(#152531));
    background-image: linear-gradient(0deg, #152531, #434c51, #152531);

    .normal-header__middle {
      height: 100%;
      width: 100%;
      position: absolute;
      margin: 0 auto;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 3.33333rem;
      flex: 2;
      line-height: 3.33333rem;
      align-self: center;
      z-index: 1;

      .normal-header__clock-info {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 12.91667rem;
        height: 3.33333rem;
        line-height: 3.33333rem;
        text-align: center;
        font-size: 0;
        cursor: pointer;
      }

      .normal-header__clock-info--icon {
        display: inline-block;
        vertical-align: middle;
        background: url() 50% no-repeat;
        background-size: 100% 100%;
        width: 32px;
        height: 32px;
        margin-right: 12px;
      }

      .normal-header__clock-info--cont {
        display: inline-block;
        vertical-align: middle;

        span {
          font-size: 18px;
          color: #fdf6cd;
        }
      }
    }

    .normal-header__btns {
      height: 3.33333rem;
      line-height: 3.33333rem;
      font-size: .67708rem;
      color: #030405;
      font-weight: 700;
      z-index: 10;

      .normal-header__btns-volume {
        margin-right: 1.04167rem;
      }

      .volume-controll {
        height: 100%;
        line-height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      .volume-controll-icon {
        float: left;
        background: url() 50% no-repeat;
        background-size: contain;
        height: 33px;
        width: 34px;
        font-style: normal;
      }

      .el-slider__runway {
        width: 100px;
        height: 10px;
        margin: 0 0 0 14px;
        position: relative;
        cursor: pointer;
        background: #d3d3d3;
        border-radius: 5px;
      }

      .el-slider__bar {
        position: absolute;
        height: 10px;
        background: grey;
        border-radius: 5px;
      }

      .el-slider__button-wrapper {
        top: -13px;
      }

      .el-slider__button {
        width: 12px;
        height: 12px;
        background: grey;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
        border-radius: 50%;
        cursor: pointer;
        border: none;
      }

      .normal-header__btns-item.blue {
        background: linear-gradient(0deg, #589bc4, #b4d6f1);
      }

      .normal-header__btns-item.middle {
        width: 3.125rem;
        padding: 0 .52083rem;
      }

      .normal-header__btns-item {
        margin-left: .52083rem;
        width: 6.97917rem;
        height: 1.875rem;
        line-height: 1.875rem;
        text-align: center;
        background: #e6e6f3;
        border-radius: 4px;
        cursor: pointer;
        font-size: 10px;
        color: #030405;
        font-weight: 700;
      }

      .normal-header__btns-item.blue:hover {
        background: linear-gradient(0deg, #7cb2d6, #b4d6f1);
      }

      .normal-header__btns-item.small:hover {
        background: #d1d1e0;
        color: #333;
      }

      .normal-header__btns-item.small {
        width: 2.8125rem;
      }

      .normal-header__btns-item.disable {
        cursor: not-allowed;
      }
    }

    .normal-header__btns,
    .controll-box {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }

    .normal-header,
    .normal-header__logo {
      display: flex;
      flex-direction: row;
      height: 3.33333rem;
      line-height: 3.33333rem;
      position: relative;
    }

    .normal-header__logo {
      justify-content: center;
      align-items: center;

      .normal-header__logo--icon {
        width: 65px;
        height: 27px;
        align-self: flex-start;
        margin-top: 10px;
        background: url('../assets/logo@2x.png') 50% no-repeat;
        background-size: 100% 100%;
      }

      .normal-header__logo--line {
        width: 1px;
        height: .72917rem;
        background: #9094a3;
        margin-left: 1.09375rem;
        margin-right: .46875rem;
      }

      .normal-header__logo--name {
        max-width: 13.02083rem;
        font-size: 16px;
        font-weight: 400;
        color: #fff;
        height: 3.33333rem;
        line-height: 3.33333rem;
        cursor: default;
        z-index: 10;
        text-decoration: none;
      }

      .txt-el {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .normal-header {
      -webkit-box-pack: justify;
      justify-content: space-between;
      width: 95.7%;
    }
  }

</style>
